<template>
    <div style="height: 95%;width: 100%;display:flex;justify-content:center;padding-top: 20px">
        <!--弹框DIV 设置弹框的大小的地方-->
        <div style="background: #fff;width: 700px;height: 600px;box-shadow: #D3DCE6 0px 0px 20px;">
            <div style="height:520px;border: #1C84C6;margin-top: 25px" class="scrollbar">
                <div style="height: 30px;">
                    <!--标题-->
                    <span style="font-size: 18px;margin-left: 25px;">
                        新建采购
                    </span>
                    <!--返回列表-->
                    <router-link style="margin-left: 500px;" :to="{path:'/qcpcaigou'}">
                        <span>
                            <i slot="suffix" style="font-size: 30px;color: #D3DCE6" class="el-icon-close"></i>
                        </span>
                    </router-link>
                </div>
                <!--height:91%;表单在弹框显示多长-->
                <el-scrollbar style="height:91%;padding-top: 20px;">
                    <div class="shugan"></div>
                    <span style="margin-left: 10px;font-size: 14px;">基本信息</span>
                    <br/>
                    <br/>
                    <!--表单-->
                    <!--表单-->
                    <el-form style="margin-top:5px;margin-left: 30px;"  size="mini" :model="jhlist" ref="jhlist">
                        <el-row>
                            <el-col :span="10">
                                <el-form-item style="width:250px;">
                                    <label slot="label" style="font-size: 13px">采购编号：</label><br/>
                                    <el-input v-model="jhlist.purchaseDh" :disabled="true"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="10">
                                <el-form-item style="width:250px;">
                                    <label slot="label" style="font-size: 13px">采购主题：</label><br/>
                                    <el-input v-model="jhlist.purchaseZhuti"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="10">
                                <el-form-item style="width:250px" prop="deliveryTime">
                                    <label slot="label" style="font-size: 13px">到货日期：</label><br/>
                                    <el-date-picker
                                            v-model="jhlist.purchaseDhdate"
                                            type="datetime"
                                            placeholder="选择日期时间"
                                            align="right"
                                            :picker-options="pickerOptions"
                                            style="width:250px">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="10">
                                <el-form-item style="width:250px">
                                    <label slot="label" style="font-size: 13px">供应商公司：</label><br/>
                                    <el-select v-model="jhlist.handledId"
                                               placeholder="请选择"
                                               value-key="handledGsname"
                                               style="width: 250px"
                                               @change="changebusni">
                                        <el-option
                                                v-for="item in gyss"
                                                :key="item.handledId"
                                                :label="item.handledGsname"
                                                :value="item.handledId">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="10">
                                <el-form-item style="width:250px;">
                                    <label slot="label" style="font-size: 13px">负责人：</label><br/>
                                    <el-input v-model="jhlist.purchaseJbr"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form><br/>
                    <span style="margin-left:30px;font-size: 13px">产品</span>
                    <br/>
                    <el-popover
                            style="width: 700px; height: 450px;"
                            placement="left"
                            trigger="click"
                            v-model="chanp"
                    >
                        <span style="font-size: 16px;">关联产品模块</span>
                        <br/>
                        <el-input @keyup.enter.native="cx3()" v-model="chanpinput" size="mini" style="width: 210px; margin-left: 230px; margin-bottom: 10px;">
                            <i slot="suffix" class="el-input__icon el-icon-search" @click="cx3()"></i>
                        </el-input>
                        <el-table
                                :data="proList"
                                highlight-current-row
                                border
                                ref="qr">
                            <el-table-column

                                    type="selection"
                                    width="50"
                                    align="center">
                            </el-table-column
>
                            <el-table-column
                                prop="prodetailBh"
                                label="产品编号"
                                width="150"
                                align="center">
                             </el-table-column>
                            <el-table-column
                                    prop="productName"
                                    label="产品名称"
                                    width="150"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="modetId.modetContent"
                                    label="产品规格"
                                    width="150"
                                    align="center">
                                <template slot-scope="y">
                                    <span v-for="pro in y.row.qmodeldetails" :key="pro.prodetailId">
                                        {{pro.modetContent}}
                                    </span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="prodetailSpri"
                                    label="售价（元）"
                                    width="90"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="prodetailKcnum"
                                    label="仓库数量"
                                    width="90"
                                    align="center">
                            </el-table-column>
                        </el-table>
                        <el-pagination
                                style="margin-left: 350px;"
                                layout="prev, pager, next"
                                @current-change="handleCurrentChange3"
                                :current-page="currPage3"
                                :page-size="pageSize3"
                                :total="totalSize3">
                        </el-pagination>
                        <div style="text-align: center;width: 100%" class="dialog-footer">
                            <el-button type="primary" @click="trueaddpro">保 存</el-button>
                            <el-button type="primary" @click="chanp = false">取 消</el-button>
                        </div>
                        <el-button slot="reference" size="mini" :readonly='true' style="margin-left:510px;" type="primary">添加商品</el-button>
                    </el-popover>
                    <el-table
                            :data="jhlist.qpurchasecbEntities"
                            style="width: 80%;margin-left: 10px;font-size:13px;">
                        <el-table-column
                                align="center"
                                prop="prodetailId"
                                label="产品编号">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="cpname"
                                label="产品名称">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                label="产品规格"
                                prop="guige">
                            <template slot-scope="y">
                                    <span v-for="pro in y.row.guige" :key="pro.prodetailId">
                                        {{pro.modetContent}}
                                    </span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                align="center"
                                label="进价"
                                prop="sj">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                label="数量"
                                prop="purchasecbCgsl"
                                width="150">
                            <template slot-scope="s">
                                <el-input-number
                                        v-model="s.row.purchasecbCgsl"
                                        @change="jsq(s.row)"
                                        :min="1"
                                        size="mini"
                                        style="width: 100px;"
                                ></el-input-number>
                            </template>
                        </el-table-column>
                        <el-table-column
                                align="center"
                                label="小计"
                                prop="purchasecbCgdj">
                        </el-table-column>
                    </el-table>
                    <br/>
                    <div style="margin-left:540px;font-size: 12px;margin-top: 10px;">
                        <span>总金额：{{this.jhlist.purchaseCgje}}</span>
                        <span>元</span>
                    </div>
                    <br/>
                </el-scrollbar>
                <!--确定按钮 设置了固定定位-->
                <div style="text-align: center;width: 80%;position: absolute;top:635px;left:230px;" class="dialog-footer">
                    <router-link :to="{path:'/qcpcaigou'}">
                        <el-button  @click="jilutankuan = false">取 消</el-button>
                    </router-link>
                    <router-link :to="{path:'/qcpcaigou'}">
                    <el-button type="primary" @click="addbusiness('jhlist')">确 定</el-button>
                    </router-link>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Qcaigouxinz",
        data() {
            return {
                gyss:[],//供应商
                num:1,//计数器
                addfrom:[],//新增
                cpid:'',
                chanp:false,
                chanpinput:'',
                pageSize3:5,//产品分页页大小
                currPage3:1,//产品当前页码，默认为1
                totalSize3:0,//产品总记录数
                proList:[],//产品集合
                jhlist:{
                    purchaseId:0,
                    purchaseCgje:'',
                    purchaseDh:'',
                    purchaseJbr:'',
                    purchaseZhuti:'',
                    purchaseDhdate:'',
                    handledId:'',
                    qpurchasecbEntities: []
                },
                pickerOptions: {//开票日期快捷选择方式
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
            };
        },
        methods: {
            /*初始化商机编号*/
            initbusNo(){
                var date = new Date();
                var year = date.getFullYear();
                var month = date. getMonth() + 1;
                var day = date.getDate();
                if (month < 10) {
                    month = "e" + month;
                }
                if(day<10){
                    day = "0" + day;
                }
                //使用年月日作为中问数
                var busnosj = year + month + day;
                //使用时间戳作为最后四位随机数
                var a = date.getTime() + "";
                var b = a.substring(9, 13);
                //最后编号
                var purchaseDh = "C_"+ busnosj +"_"+ b;
                this.jhlist.purchaseDh= purchaseDh;
            },
            //计数器
            jsq(row){
                row.purchasecbCgdj = row.purchasecbCgsl * row.sj;
                this.jhlist.purchaseCgje = 0;
                this.jhlist.qpurchasecbEntities.forEach((pro)=>{
                    this.jhlist.purchaseCgje = this.jhlist.purchaseCgje + pro.purchasecbCgdj;
                });
            },
            changebusni(){
                this.gys()
            },
            //供应商查询
            gys(){
                this.$axios.post("http://localhost:8088/per/gys-list").then(v=>{
                    this.gyss=v.data;
                }).catch();
            },
            //产品查询
            initData(){
                this.$axios.post("http://localhost:8088/pur/chanping-list").then(v=>{
                        this.proList = v.data;

                    })
                    .catch()
            },
            //确定按钮
            addbusiness(){

                this.jhlist.purchaseZt="待审核"
                window.console.log(this.jhlist.qpurchasecbEntities)
                this.$axios.post("http://localhost:8088/per/xinz-caigou",this.jhlist).then(()=>{
                    this.$notify({
                        title:'成功',
                        message: '新增成功！',
                        type: 'success'
                    });
                }).catch();
            },
            /*当前页方法*/
            handleCurrentChange(val) {
                this.initData(val);
            },
            /*当前页方法*/
            handleCurrentChange2(val) {
                this.jihuainitData(val);
            },
            /*当前页方法*/
            handleCurrentChange3(val) {
                this.initProData(val);
            },
            /*选择产品*/
            trueaddpro(){
                this.chanp = false;
                let zjee = 0;
                this.$refs.qr.selection.forEach((tab,p)=> {
                    let pro = {};
                    this.$set(pro, "cpname", tab.productName);
                    this.$set(pro, "prodetailId", tab.prodetailId);
                    for(var i=0;i<tab.qmodeldetails.length;i++){
                        this.$set(pro, "guige", tab.qmodeldetails);
                    }
                    this.$set(pro, "sj", tab.prodetailSpri);
                    this.$set(pro, "purchasecbCgsl",1);
                    this.$set(pro, "purchasecbCgdj",tab.prodetailSpri*this.num);
                    zjee+=this.$set(pro, "purchasecbCgdj",tab.prodetailSpri*this.num);
                    window.console.log(this.jhlist.qpurchasecbEntities)
                    this.jhlist.qpurchasecbEntities.splice(p, 0, pro);
                    // this.jhlist.cgqpurchasecbEntities.productId = tab.prodetailId;
                    // this.jhlist.cgqpurchasecbEntities.cgNum = this.num;
                    // this.jhlist.cgqpurchasecbEntities.total = tab.prodetailSpri*this.num;
                })
                this.jhlist.purchaseCgje=zjee
            },
            /*初始化产品*/
            initProData(){

            },
        },
        created: function () {
            this.initbusNo();
            this.gys(),
            this.initData()
        },
    }
</script>

<style scoped>
    .shugan{
        border-left-color: rgb(70, 205, 207);
        border-left-width: 1.8px;
        height: 10px;
        border-left-style: solid;
        display: inline;
        font-size: 13px;
        margin-left: 25px;
    }

    /deep/ .el-scrollbar__wrap {
        overflow: scroll;
        width: 120%;
        height: 100%;
    }

</style>